

&lt;!DOCTYPE html&gt;
&lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;去过的地方&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div id="main" style="height:600px;width:900px;margin:20px auto;"&gt;&lt;/div&gt;
    &lt;script src="http://echarts.baidu.com/build/dist/echarts-all.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            backgroundColor: '#1b1b1b',
            color: ['gold', 'aqua', 'lime'],
            title: {
                text: '去过的地方',
                subtext: '北京 昆明 西北 呼和浩特',
                x: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{b}'
            },
            dataRange: {
                show:false,
                min : 0,
                max : 100,
                calculable : true,
                color: ['#ff3333', 'orange', 'yellow','lime','aqua'],
                textStyle:{
                    color:'#fff'
                }
            },
            series: [{
                name: '全国',
                type: 'map',
                roam: true,
                hoverable: false,
                mapType: 'china',
                itemStyle: {
                    normal: {
                        borderColor: 'rgba(100,149,237,1)',
                        borderWidth: 0.5,
                        areaStyle: {
                            color: '#1b1b1b'
                        }
                    }
                },
                data: [],

                geoCoord: {"\u970d\u8425\u5730\u94c1\u7ad9": [116.37758918696, 40.08576874062], "\u4e3d\u6c5f": [100.22962839888, 26.875351089481], "\u5170\u5dde": [103.82330544073, 36.064225525043], "\u5317\u4eac": [116.39564503788, 39.92998577808], "\u5f20\u6396": [100.45989186892, 38.939320296982], "\u897f\u5b81": [101.7679209898, 36.640738611958], "\u8336\u5361\u76d0\u6e56": [110.96193094165, 35.063676878932], "\u7941\u8fde": [99.711262922683, 38.327948935969], "\u9752\u6d77\u6e56": [87.485050688632, 43.82004784208], "\u94f6\u5ddd": [106.20647860784, 38.502621011876], "\u9999\u683c\u91cc\u62c9": [99.831599256439, 27.907357820428], "\u6566\u714c": [94.158041766451, 40.388771499344], "\u5e03\u8fbe\u62c9\u5bab": [91.12510354981, 29.660383722752], "\u5317\u6234\u6cb3": [119.47932079421, 39.854292584187], "\u6606\u660e": [102.71460113878, 25.049153100453], "\u547c\u548c\u6d69\u7279": [111.66035052005, 40.828318873082]}
            }, {
                name: '足迹',
                type: 'map',
                mapType: 'china',
                data: [],
                markLine: {
                    smooth: true,
                    effect: {
                        show: true,
                        scaleSize: 1,
                        period: 30,
                        color: '#fff',
                        shadowBlur: 10
                    },
                    itemStyle: {
                        normal: {
                            borderWidth: 1,
                            lineStyle: {
                                type: 'solid',
                                shadowBlur: 10
                            },
                            label:{
                                show:false
                            },

                        }
                    },

                    data: [[{"name": "\u5317\u4eac"}, {"name": "\u6606\u660e", "value": 1}], [{"name": "\u6606\u660e"}, {"name": "\u4e3d\u6c5f", "value": 1}], [{"name": "\u4e3d\u6c5f"}, {"name": "\u9999\u683c\u91cc\u62c9", "value": 1}], [{"name": "\u9999\u683c\u91cc\u62c9"}, {"name": "\u4e3d\u6c5f", "value": 1}], [{"name": "\u4e3d\u6c5f"}, {"name": "\u6606\u660e", "value": 1}], [{"name": "\u6606\u660e"}, {"name": "\u5317\u4eac", "value": 1}], [{"name": "\u970d\u8425\u5730\u94c1\u7ad9"}, {"name": "\u5e03\u8fbe\u62c9\u5bab", "value": 1}], [{"name": "\u5317\u4eac"}, {"name": "\u5317\u6234\u6cb3", "value": 1}], [{"name": "\u5317\u6234\u6cb3"}, {"name": "\u5317\u4eac", "value": 1}], [{"name": "\u5317\u4eac"}, {"name": "\u5170\u5dde", "value": 1}], [{"name": "\u5170\u5dde"}, {"name": "\u6566\u714c", "value": 1}], [{"name": "\u6566\u714c"}, {"name": "\u5f20\u6396", "value": 1}], [{"name": "\u5f20\u6396"}, {"name": "\u7941\u8fde", "value": 1}], [{"name": "\u7941\u8fde"}, {"name": "\u897f\u5b81", "value": 1}], [{"name": "\u897f\u5b81"}, {"name": "\u9752\u6d77\u6e56", "value": 1}], [{"name": "\u9752\u6d77\u6e56"}, {"name": "\u8336\u5361\u76d0\u6e56", "value": 1}], [{"name": "\u8336\u5361\u76d0\u6e56"}, {"name": "\u897f\u5b81", "value": 1}], [{"name": "\u897f\u5b81"}, {"name": "\u94f6\u5ddd", "value": 1}], [{"name": "\u94f6\u5ddd"}, {"name": "\u547c\u548c\u6d69\u7279", "value": 1}], [{"name": "\u547c\u548c\u6d69\u7279"}, {"name": "\u5317\u4eac", "value": 1}]]
                },
                markPoint: {
                    symbol: 'emptyCircle',
                    symbolSize: function(v) {
                        return 10 + v / 10
                    },
                    effect: {
                        show: true,
                        shadowBlur: 0
                    },
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            }
                        },
                        emphasis: {
                            label: {
                                position: 'top'
                            }
                        }
                    },
                    data: [{"name": "\u970d\u8425\u5730\u94c1\u7ad9", "value": 1}, {"name": "\u4e3d\u6c5f", "value": 1}, {"name": "\u5170\u5dde", "value": 1}, {"name": "\u5317\u4eac", "value": 1}, {"name": "\u5f20\u6396", "value": 1}, {"name": "\u897f\u5b81", "value": 1}, {"name": "\u8336\u5361\u76d0\u6e56", "value": 1}, {"name": "\u7941\u8fde", "value": 1}, {"name": "\u9752\u6d77\u6e56", "value": 1}, {"name": "\u94f6\u5ddd", "value": 1}, {"name": "\u9999\u683c\u91cc\u62c9", "value": 1}, {"name": "\u6566\u714c", "value": 1}, {"name": "\u5e03\u8fbe\u62c9\u5bab", "value": 1}, {"name": "\u5317\u6234\u6cb3", "value": 1}, {"name": "\u6606\u660e", "value": 1}, {"name": "\u547c\u548c\u6d69\u7279", "value": 1}]
                }
            }]
        };
        myChart.setOption(option);
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

